<template>
  <transition name="dialog-fade">
    <!-- 外层容器 -->
    <div v-show="visible" class="daai-dialog_wrapper">
      <!-- 这一层主要控制对话框的宽高 -->
      <div class="daai-dialog" :style="{ width, marginTop: top }">
        <!-- 头部 -->
        <div class="daai-dialog_header">
          <slot name="title">
            <span class="daai-dialog_title">{{ title }}</span>
          </slot>
          <!-- 关闭按钮 -->
          <button class="daai-dialog_headerbtn" @click="clickHandle">
            <Daai-Icon icon="close"></Daai-Icon>
          </button>
        </div>
        <!-- 中间内容部分，就是一个默认插槽 -->
        <div class="daai-dialog_body">
          <slot></slot>
        </div>
        <!-- 底部部分，是一个具名插槽 -->
        <div class="daai-dialog_footer" v-if="$slots.footer">
          <slot name="footer"></slot>
        </div>
      </div>
    </div>
  </transition>
</template>

<script setup>
import propTypes from './props'
defineOptions({
  name: 'DaaiDialog',
})
defineProps(propTypes)

const emit = defineEmits(['close'])
const clickHandle = () => {
  emit('close')
}
</script>

<style lang="scss" scoped></style>
